<template>
  <div>
    <NavBar />
    <!-- about page content -->
  </div>
  <div class="background-image">
    <h1>生动科普星会员培训系统</h1>
    <div class="login-form-container">
      <form v-if="showLoginForm" action="#" class="login-form">
        <h2>登录</h2>
        <input type="text" name="username" placeholder="用户名" />
        <input type="password" name="password" placeholder="密码" />
        <div class="form-links">
          <button @click="showLoginForm = true">登录</button>
          <button @click="showLoginForm = false">注册</button>
        </div>
      </form>
      <form v-else action="#" class="register-form">
        <h2>注册</h2>
        <input type="text" name="name" placeholder="姓名" />
        <div class="age-gender">
          <input type="text" name="gender" placeholder="性别" />
          <input type="text" name="age" placeholder="年龄" />
        </div>
        <input type="text" name="phone" placeholder="手机号/账号" />
        <input type="password" name="password" placeholder="密码" />
        <input type="email" name="email" placeholder="邮箱" />
        <div class="form-links">
          <button @click="showLoginForm = true">登录</button>
          <button @click="showLoginForm = false">注册</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showLoginForm: true // 默认显示登录表单
    }
  }
}
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
}

.background-image {
  background-image: url('@/assets/主背景2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center 10px;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 60px;
  position: fixed;
}

h1 {
  color: white;
  margin: 0;
  font-size: 65px;
  text-align: left;
  position: relative;
  top: -250px;
  left: -25px;
  text-shadow: 0 0 100px #0cafe6;
}

.login-form-container {
  /* position: relative; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

.login-form {
  width: 240px;
  height: 350px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: absolute;
  z-index: 100;
  background: inherit;
  border-radius: 18px;
  overflow: hidden;
  top: -100px;
  left: 250px;
}
.login-form::before {
  content: '';
  width: 400px;
  height: 600px;
  background: rgba(255, 0, 0, 0.077); /* 明确的背景色 */
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.375);
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: -1; /* 提高z-index以确保它在.login-form之上 */
  filter: blur(6px);
  /* overflow: hidden; */
}

input[type='text'],
input[type='password'] {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px; /* 圆角边框 */
}

button[type='submit']:hover {
  background-color: #0056b3;
}
.register-form {
  /* ...与.login-form相同的样式... */
  width: 240px;
  height: 350px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: absolute;
  z-index: 100;
  background: inherit;
  border-radius: 1px;
  overflow: hidden;
  top: -100px;
  left: 250px;
}
.register-form h2 {
  /* 设置标题下边距 */
  margin-bottom: 5px;
}
.register-form input {
  /* 设置输入框的垂直间距 */
  margin-bottom: 5px;
}
.register-form::before {
  content: '';
  width: 400px;
  height: 600px;
  background: rgba(255, 0, 0, 0.077); /* 明确的背景色 */
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.375);
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: -1; /* 提高z-index以确保它在.login-form之上 */
  filter: blur(6px);
  /* overflow: hidden; */
}
.register-form input:hover {
  outline: 2px solid rgb(0, 0, 0);
  transition: box-shadow 0.3s ease-in-out; /* 平滑过渡效果 */
}
.age-gender {
  display: flex; /* 使用flex布局让子元素横排显示 */
  justify-content: space-between; /* 在子元素之间添加间隔 */
  margin-bottom: 1px; /* 在组下添加一些间隔 */
  width: 2px;
}
.age-gender input {
  /* 让两个输入框平均分配空间 */
  margin-right: 1px; /* 在输入框之间添加一些间隔 */
  width: 5px;
}
.age-gender input {
  width: 100px; /* 设置固定的宽度 */
  margin-right: 10px; /* 在输入框之间添加一些间隔 */
}

.age-gender input:last-child {
  margin-right: 0; /* 移除最后一个输入框的右边距 */
}
input[type='email'][name='email'] {
  /* 在这里添加您的样式 */
  width: 222px; /* 例如，设置宽度为200px */
  padding: 8px; /* 增加内边距 */
  /* 增加外边距 */
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 4px; /* 设置圆角边框 */
  box-shadow: none; /* 移除默认阴影 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时的样式 */
input[type='email'][name='email']:hover {
  box-shadow: 0 0 8px rgba(0, 0, 255, 0.5); /* 添加蓝色发光效果 */
}
.form-links {
  text-align: center;
  margin-top: 20px;
}

.form-links button {
  margin: 0 1px;
  padding: 10px 45px;
  border: none;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  color: white;
  cursor: pointer;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.form-links button:hover {
  box-shadow: 0 0 10px #a200ff6b; /* 鼠标悬停时的蓝色边缘光 */
}

.form-links button:hover {
  background-color: #05caede1;
}
</style>
